<!--用户管理页面-->
<template>
    <div>
        <!--        搜索-->
        <div>
            <el-col :span="24">
                <form>
                    <el-input style="width: 300px;" v-model="input" placeholder="请输入内容"></el-input>
                    <el-button type="primary" @click="runUser">搜索</el-button>
                </form>
            </el-col>
        </div>
<!--        用户数据-->
        <div>
            <el-table :data="list.list" :stripe="true">
                <el-table-column prop="id" label="编号"></el-table-column>
                <el-table-column prop="username" label="用户名"></el-table-column>
                <el-table-column prop="email" label="邮箱"></el-table-column>
                <el-table-column prop="province" label="省市"></el-table-column>
                <el-table-column prop="city" label="地区"></el-table-column>
                <el-table-column prop="create_time" label="创建时间"></el-table-column>
                <el-table-column prop="update_time" label="更新时间"></el-table-column>
                <el-table-column prop="title" label="笔名"></el-table-column>
                <el-table-column>
                    <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-edit" size="small"></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!--分页-->
        <div>
            <el-button @click="firstPage">首页</el-button>
            <el-button @click="prePage">上一页</el-button>
            <el-button @click="nextPage">下一页</el-button>
            <el-button @click="lastPage">尾页</el-button>
            <span>当前共{{list.pages}}页</span>
        </div>
    </div>
</template>

<script>
export default {
  name: 'BookUser',
  data () {
    return {
      list: {},
      input: '',
      pageNum: null,
      pageSize: null
    }
  },
  created () {
    this.$http.post('user/findByName').then(response => {
      this.list = response.data
    })
  },
  methods: {
    runUser () {
      this.$http.post('user/findByName', {username: this.input}).then(response => {
        this.list = response.data
      })
    },
    firstPage () {
      this.pageNum = 1
      this.pageSize = this.list.pageSize
      this.$http.post('user/findByName', {title: this.input, pageNum: this.pageNum, pageSize: this.pageSize}).then(response => {
        this.list = response.data
      })
    },
    prePage () {
      if (this.list.hasPreviousPage) {
        this.pageNum = this.list.prePage
        this.pageSize = this.list.pageSize
        this.$http.post('user/findByName', {title: this.input, pageNum: this.pageNum, pageSize: this.pageSize}).then(response => {
          this.list = response.data
        })
      } else {
        this.$notify({
          title: '注意',
          message: '当前已经是第一页',
          type: 'warning'
        })
      }
    },
    nextPage () {
      if (this.list.hasNextPage) {
        this.pageNum = this.list.nextPage
        this.pageSize = this.list.pageSize
        this.$http.post('user/findByName', {title: this.input, pageNum: this.pageNum, pageSize: this.pageSize}).then(response => {
          this.list = response.data
        })
      } else {
        this.$notify({
          title: '注意',
          message: '当前已经是最后一页',
          type: 'warning'
        })
      }
    },
    lastPage () {
      this.pageNum = this.list.pages
      this.pageSize = this.list.pageSize
      this.$http.post('user/findByName', {title: this.input, pageNum: this.pageNum, pageSize: this.pageSize}).then(response => {
        this.list = response.data
      })
    }
  }}
</script>

<style scoped>
</style>
